<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-model、v-for、v-on</title>
	<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
      <input type="text" v-model="inputValue"/>
      <button v-on:click="handerClick">提交</button>
	  <ul>
	  	<!-- <li v-for="item in list">{{item}}</li> -->
        <item-todo
          v-for="item in list"
          :content="item"
        >
        </item-todo>
	  </ul>
    </div>
    <script type="text/javascript">

        var child = {
            props:['content'],
            template: '<li>{{content}}</li>'
        }

    	var app = new Vue({
             el: '#app',
             components: {
                'ItemTodo': child
             },
             data: {
             	list: [],
             	inputValue: ''
             },
             methods: {
                handerClick: function () {
                	this.list.push(this.inputValue)
                	this.inputValue = ''
                }
             }
    	})
    </script>
</body>
</html>
